---
import Layout from "../layouts/Layout.astro";
---

<Layout>
  <div class="archive animated fadeInDown">
    <ul class="list-with-title">
      <th:block th:each="archive : ${archives.items}">
        <div class="listing-title" th:text="${archive.year}"></div>
        <ul class="listing">
          <th:block th:each="month : ${archive.months}">
            <div th:each="post : ${month.posts}" class="listing-item">
              <div class="listing-post">
                <a
                  th:href="@{${post.status.permalink}}"
                  th:title="${post.spec.title}"
                  th:text="${post.spec.title}"></a>
                <div class="post-time">
                  <span
                    class="date"
                    th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
                  ></span>
                </div>
              </div>
            </div>
          </th:block>
        </ul>
      </th:block>
    </ul>
  </div>
  <div
    th:if="${archives.hasPrevious() || archives.hasNext()}"
    class="pagination flex justify-between items-center"
  >
    <a
      th:if="${archives.hasPrevious()}"
      class="btn w-20"
      role="navigation"
      th:href="@{${archives.prevUrl}}"
      title="上一页">上一页</a
    >
    <span
      class="text-sm"
      th:text="${archives.page} +'/'+ ${archives.totalPages}"></span>
    <a
      th:if="${archives.hasNext()}"
      class="btn w-20"
      role="navigation"
      th:href="@{${archives.nextUrl}}"
      title="下一页">下一页</a
    >
  </div>
</Layout>
